<template>
	<view class="user-issue-message" :style="{background: backgroundType === 0 ? '#ffffff' : '#f3f3f3'}"
		@click="gotoCommunityDetails(commentObject.intactArticleId)">
		<!-- user信息 -->
		<view class="user-message" v-if="!userShow" ref="titleRef">
			<view class="user-message-images">
				<van-image :src='commentObject.user.avatar' round width='40px' height='40px' lazy-load use-loading-slot
					referrer="no-referrer|origin|unsafe-url" style='height:40px'>
					<van-loading slot="loading" type="spinner" size="20" vertical />
					<text slot="error">加载失败</text>
				</van-image>
				<view>
					<h1>{{commentObject.user.userName}}</h1>
					<text>{{commentObject.article.createTime | formatDate( 'yyyy年MM月dd日')}}发布</text>
				</view>
			</view>
			<text>
				{{commentObject.article.viewsNum}}阅读
			</text>
		</view>
		<!-- 标题and内容 -->
		<view class="headline" :style="{'margin-top': userShow ? '32upx' : '0'}">
			<b>
				<h1>{{commentObject.article.title}}</h1>
			</b>
			<view class="privacy-box" v-if="userShow" @click.stop="editArticle">
				<view class="privacy">私密</view>
				<view class="more">
					<image src="../../static/more.png" mode=""></image>
				</view>
				<view class="popup" v-if="editStatus">
					<view class="privacys" style="border: 0;" @click.stop="setPrivacy">设为私密</view>
					<view class="privacys" @click.stop="deleteArticle">删除文章</view>
				</view>
			</view>
		</view>

		<user-select class="title">{{commentObject.article.content}}</user-select>
		<!-- 图片 -->
		<view class="flex j-s a-s" :style='{height:containerH+"px"}' v-if='imageIsShow' @click.stop='stopbubbling'>
			<van-image :width='imgW' :height="imgH" :src='imageIsNull(item)' radius='8px'
				v-for="(item,index) in imageArray" :key='index' use-error-slot fit="cover" lazy-load
				@click.stop="preview(item)" show-menu-by-longpress referrer="no-referrer|origin|unsafe-url">
				<van-loading slot="loading" type="spinner" size="20" vertical />
				<text slot="error">加载失败</text>
			</van-image>
			<view :style="{width:imgW+'px'}" v-if="[2,5,8].includes(imageArray.length)"></view>
		</view>
		<!-- 访问 -->
		<view class="user-flow" :style="{'justify-content':userShow ? 'space-between' : 'flex-end'}">
			<view class="reading-quantity" v-if="userShow">
				<text>2022年12月12日发布</text>
				<text>{{commentObject.article.viewsNum}}阅读</text>
			</view>
			<view class="transmit-message">
				<!-- 转发 -->
				<view @click.stop="userTransmit()">
					<button open-type="share" class="free-btn-bordernone" style="background:transparent;"
						@click.stop="userTransmit()">
						<image src="../../static/message-icon/transmit.png" class="share"></image>
					</button>
					<text class='text_transmit'>{{commentObject.article.shareNum}}</text>
				</view>
				<!-- 信息 -->
				<view>
					<image src="../../static/message-icon/news.png" mode="" class=""></image>
					<text>{{commentObject.article.commentNum}}</text>
				</view>
				<!-- 点赞 -->
				<view @click.stop="gitStatus(commentObject.intactArticleId)">
					<image
						:src="commentObject.likeStatus ? '../../static/message-icon/dianzan.png' : '../../static/message-icon/Nolink.png'"
						mode=""></image>
					<text>{{commentObject.article.likeNum}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		formatDate
	} from '../../data/data.js'
	import {
		capsuleTopHeight
	} from "../../mixins/mixins.js"
	export default {
		mixins: [capsuleTopHeight],
		name: "public-comment",
		props: {
			commentObject: {
				type: Object,
				default: {}
			},
			userShow: {
				type: Boolean,
				default:false,
			},
			backgroundType: {
				type: Number,
				default: 0
			},
			name: {
				type: String
			}
		},
		data() {
			return {
				editStatus: false,
				contentHeight: 0,
				flag: true,
				imageArray: [],
				wxWindowWidth: undefined,
				containerW: undefined,
				containerH: 200,
				imgW: 200,
				imgH: 200,
				singleImgW: 200,
				imageIsShow: true,
			};
		},
		filters: {
			formatDate(time, fmt) {
				return formatDate(time, fmt)
			},
		},
		created() {
			if (this.commentObject.image.imageLink === null || this.commentObject.image === null) {
				return []
			}
			let imageS = this.commentObject.image.imageLink.split(';')
			this.imageArray = imageS
			let width = uni.getSystemInfoSync().windowWidth
			this.wxWindowWidth = width
			this.calcWH()
		},
		methods: {
			editArticle() {
				this.editStatus = !this.editStatus
			},
			setPrivacy() {
				this.editStatus=false
				this.$emit('setPrivacy')
				console.log('设为私密事件触发',this.commentObject.intactArticleId);
			},
			deleteArticle() {
				this.editStatus=false
				console.log('删除事件触发');
				this.$emit('deleteArticle',this.commentObject.intactArticleId)
			},
			stopbubbling() {
				console.log('阻止行为')
			},
			preview(i) {
				uni.previewImage({
					urls: this.imageArray,
					current: i,
				})
			},
			imageIsNull(item) {
				if (this.imageArray[0] == '') {
					this.imageIsShow = false
				} else {
					return item
					this.imageIsShow = true
				}
			},
			calcWH() {
				let {
					wxWindowWidth: w,
					imageArray: {
						length: len
					}
				} = this
				if (len === 1) {
					//如果只有一张，需要特殊处理，比如长图，或者手机拍照，效果不一样
					let [src] = this.imageArray
					uni.getImageInfo({
						src,
						success: ({
							width,
							height
						}) => {
							let per = width / 2 / this.singleImgW

							if (height > 2000) {
								this.imgW = this.singleImgW / 1.5
								this.imgH = this.singleImgW / 1.2
							} else {
								this.imgW = this.singleImgW
								this.imgH = height / 2 / per
							}
							this.containerH = this.imgH
						},
					})
				} else if (len === 4) {
					//多张图的话，算出平均宽度，按正方形处理，留出间隙
					this.imgW = this.imgH = Math.floor((w - 10) / 2) - 28
					//算容器高度，留出间隙
					this.containerH = Math.ceil(this.imageArray.length / 2) * (this.imgH + 5)
				} else {
					//多张图的话，算出平均宽度，按正方形处理，留出间隙
					this.imgW = this.imgH = Math.floor((w - 10) / 3) - 20
					//算容器高度，留出间隙
					this.containerH = Math.ceil(this.imageArray.length / 3) * (this.imgH + 5)
				}
			},
			gotoCommunityDetails(item) {
				uni.navigateTo({
					url: `../../subpkg/community-details/community-details?id=${item}`
				})
			},
			async gitStatus(id) {
				const {
					data: res
				} = await uni.$http.post(`/ym_server/article-like/${id}`)
				this.$emit("clickId", id)
			},
			userTransmit() {
				this.$emit("Transmit")
			},
			async userDelete(id) {
				this.$emit('MyDelete', id)
			}
		},
	}
</script>

<style lang="scss">
	.flex {
		display: flex;
		flex-wrap: wrap;
		// margin: 16upx auto 32upx;
	
		image {
			border-radius: 10rpx;
		}
	}
	
	.j-s {
		justify-content: space-between;
	}
	
	.a-s {
		align-content: space-between;
	}

	.free-btn-bordernone {
		height: 100%;
		width: 100%;
		background: none !important;
		color: #000 !important;
		font-size: 7px;
		text-align: center;
		line-height: 100%;
		margin: 0;
		outline: none;
		border: none !important;
	}

	.free-btn-bordernone::after {
		border: none;
	}

	.text_transmit {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
	}

	.share {
		width: 26rpx;
		height: 26rpx;
		margin-left: -30rpx;
		margin-top: 2px;
	}

	.user-issue-message {
		margin: auto;
		margin-top: 32upx;
		display: flex;
		flex-direction: column;
		padding: 32upx;
		border-radius: 16upx;

		// 用户信息
		.user-message {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24upx;
			.user-message-images {
				display: flex;
				align-items: center;
				justify-content: space-between;

				>view {
					display: flex;
					flex-direction: column;
					margin-left: 16rpx;

					h1 {
						font-weight: 500;
						font-size: 32upx;
						color: #333333;
						letter-spacing: 1px;
					}

					>text {
						font-size: 24upx;
						color: #7A7A7A;
						// margin-top: 12rpx;
					}
				}

			}

			>text {
				font-size: 24upx;
				font-weight: 400;
				color: rgba(122, 122, 122, 0.5);
				height: 16upx;
				border: solid 1px #ccc;
				padding: 10rpx;
				border-radius: 4px;
				max-width: 200upx;
				text-align: center;
				line-height: 16upx;
				color: #CCCCCC;
				letter-spacing: 1px;
			}
		}

		// 自己编辑
		.userOneself {
			width: 100%;
			font-size: 20upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.reading-quantity {
				color: #7A7A7A;
			}

			.Delete {
				color: #FF756A;
			}
		}

		.headline {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16upx;
			white-space: nowrap;

			b {
				width: 100%;

				h1 {
					font-weight: 700;
					font-size: 32upx;
					color: #333333;
					letter-spacing: 1px;
					overflow: hidden;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					text-overflow: ellipsis;
				}
			}

			.privacy-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				.privacy {
					width: 76upx;
					height: 36upx;
					text-align: center;
					line-height: 36upx;
					border: solid 1px #3FD3D1;
					color: #3FD3D1;
					font-weight: 400;
					font-size: 24upx;
					border-radius: 8upx;
				}
				.more {
					width: 30upx;
					height: 40upx;
					padding: 0 10upx;
					display: flex;
					justify-content: flex-end;
					image{
						width: 8upx;
						height: 100%;
					}
				}
				.popup {
					width: 240upx;
					height: 176upx;
					background: #fff;
					position: absolute;
					top: 60upx;
					right: -30upx;
					padding: 10upx;
					 box-shadow: 1px 1px 10px rgba(0, 0, 0, .2);
					z-index: 999;
					border-radius: 10upx;

					::before {
						position: absolute;
						top: -5px;
						right: 20px;
						content: '';
						width: 10px;
						height: 10px;
						background: #fff;
						transform: rotate(135deg);
						box-shadow: 1px -2px 5px rgba(0, 0, 0, .2);
					}

					::after {
						position: absolute;
						top: 0px;
						right: 15px;
						content: '';
						width: 20px;
						height: 20px;
						background: #fff;
					}
					.privacys {
						width: 90%;
						height: 88upx;
						line-height: 50%;
						color: #666666;
						font-size: 24upx;
						box-sizing: border-box;
						padding-left: 32upx;
						padding-top: 32upx;
						border-top: 1px solid #EEF2F4;
					}
				}
			}
		}

		.title {
			display: -webkit-box;
			letter-spacing: 1px;
			font-size: 28upx;
			font-weight: 400;
			color: #666666;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			margin-bottom: 16upx;
		}

		.user-flow {
			width: 100%;
			height: 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 32upx;

			.reading-quantity {
				display: flex;
				align-items: center;

				text:nth-of-type(2) {
					margin-left: 32rpx;
				}
				text {
					font-size:24upx;
					color: rgba(122, 122, 122, 0.5);
					font-weight: normal;
				}
			}

			.transmit-message {
				width: 35%;
				min-width:40%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				view {
					max-width: 200upx;
					// width: 56upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;

					>image {
						width: 30upx;
						height: 30upx;
						margin-right:8upx;
					}

					text {
						color: #7A7A7A;
						font-size: 24upx;
					}
				}
			}
		}
	}
</style>
